<template>
  <div class="home">
    <van-swipe :autoplay="3000" indicator-color="white" class="my-swipe">
      <van-swipe-item class="item" v-for="item in lunbolist" :key="item.id">
        <img :src="item.img" alt />
      </van-swipe-item>
    </van-swipe>
    <!-- <Grids :grids="grids"></Grids> -->
    <van-grid :column-num="3">
      <van-grid-item :text="grid.title" v-for="grid in grids" :key="grid.id" :to="grid.to">
        <div slot="icon">
            <!-- <img src="https://img.yzcdn.cn/vant/apple-1.jpg" alt=""> -->
            <img :src="grid.src" alt="" class="grid-img">
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>
// import Grids from '../../components/Grids';
export default {
  data: () => ({
    lunbolist: [],
    grids: []
  }),
  created () {
    // console.log(this.$http)
    this.getLunBoList()
    this.getGrids()
  },
  methods: {
    async getLunBoList () {
      const {
        data: { message, status }
      } = await this.$http.get('api/getlunbo')
      if (status !== 0) return console.log('获取数据失败')
      this.lunbolist = message
      console.log(message)
    },
    async getGrids () {
      const {
        data: { message, status }
      } = await this.$http.get('api/grids')
      if (status !== 0) return console.log('获取数据失败')
      this.grids = message
      console.log(message)
    }
  },
  components: {
    // Grids
  }
}
</script>

<style lang="less" scoped>
.home {
  .my-swipe {
    height: 200px;
    .item {
      &:nth-child(1) {
        background: red;
      }
      &:nth-child(2) {
        background: blue;
      }
      &:nth-child(3) {
        background: green;
      }
      img {
        width: 100%;
        height: 100%;
      }

    }
    //     .item:nth-child(1) {
    //   background: red;
    // }
    // .item:nth-child(2) {
    //   background: blue;
    // }
    // .item:nth-child(3) {
    //   background: green;
    // }
  }
        .grid-img{
        width:60px;
        height: 60px;
      }
}
</style>
